{extend name="public/base"/}
{block name="style"}

<link rel="stylesheet" href="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.css">
<script src="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.js"></script>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/webuploader/webuploader.css">
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.all.min.js"></script>
<!-- datepicker statr -->
<link href="__PUBLIC__/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="__PUBLIC__/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="__PUBLIC__/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/board/board.min.css">
<!-- datepicker end -->
<style>
.chapter-content p{margin: 0 0 15px;font-size:16px;text-indent:2em;}
.el-tag {
    background-color: #8391a5;
    display: inline-block;
    padding: 0 5px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap;
}
.el-tag--success {
    background-color: rgba(18,206,102,.1);
    border-color: rgba(18,206,102,.2);
    color: #13ce66;
}
</style>
{/block}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>{$meta_title}</h2>
		</div>
		<div class="pull-right">
		{if condition="in_array($group,$access)"}
			<a class="btn btn-primary" href="{:url('admin/chapter/add?model_id=2',array('articleid'=>$articleid))}">新 增</a>
			<a class="btn btn-primary" href="{:url('admin/chapter/drop?model_id=2',array('id'=>$articleid))}">排 序</a>

			<a class="btn btn-primary"><input class="check-all" type="checkbox">全选</a>
			
			<button class="btn btn-danger ajax-post confirm" url="{:url('admin/chapter/del?model_id=2',array('articleid'=>$articleid))}" target-form="ids">删 除</button>
		{/if}
		</div>
	</header>
	<div class="main-box-body clearfix">
		
		<div class="col-sm-3">
            <img src="{$info.cover}" style="max-width:100%" onerror="this.src='/public/novel/images/default.jpg'"/>
            <h4>{$info.title}</h4>
            <div style="line-height: 1.7em;margin-top:10px;" class="text-muted">
                字数: {$info.size}
            </div>
            <div class="text-muted" style="margin-top:10px;line-height: 1.7em;">
                {$info.intro}
			</div>
        </div>
        <div class="col-sm-9">
            <ul class="list-group" style="margin-left:0">
				{volist name="items" id="item" key="k"}
                <li class="list-group-item chapter-item" id="chapter{$item['id']}">
						<input class="ids row-selected" type="checkbox" name="id[]" value="{$item['id']}">
						<span style="display:inline-block;min-width:26px;">{$item.chapterorder}</span>

						{if condition="in_array($group,$access)"}
							<a href="{:url('admin/chapter/edit?model_id=2',array('id'=>$item['id'],"articleid"=>$articleid))}" >{$item.chaptername}</a>
						{else}
							<span data-toggle="view-chapter" data-id="{$item['id']}" data-chaptername="{$item['chaptername']}">{$item.chaptername}</span>
						{/if}
						
                        
                        <span style="font-size:12px;margin-left:5px">
							<span style="color:#f30">{$item['isvip']==1?"VIP":"免费"}</span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span style="color:#03a9f4">售价：{$item['isvip']==1?$item['saleprice']:"0"}</span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span style="color:#13ce66">字数：{$item['size']}</span>
							{if $page ==1 && $k ==$suggestid}
							<span class="el-tag el-tag--success">建议本章生成推广文案</span>
							{/if}
							{if $page ==1 && $k == $focuschapter}
							<span class="el-tag el-tag--success">默认强关章节</span>
							{/if}
                        </span>
						<span class="pull-right">
							{if $item['chaptertype']==0 && $page ==1}
							<a href="{:url('admin/chapter/focuschapter?model_id=2',array('id'=>$item['id'],'articleid'=>$articleid,'focuschapter'=>$item['chapterorder']))}" class="ajax-get confirm">设置强关章节</a>
							{/if}
							<a href="{:url('admin/novel/setvip?model_id=1',array('id'=>$item['id'],'chapterorder'=>$item['chapterorder'],'articleid'=>$articleid,'type'=>'vip','action'=>'setvip'))}" class="ajax-get confirm">设置VIP章节</a>
							{if $item['chaptertype']==0 && $page ==1 && $k <=5}
							<div class="btn-group">
								
								<a type="button" class="dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-link"></i>生成推广文案<span class="caret"></span>
								</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li><a href="{:url('articles/editor',array('model_id'=>1,'cartoonid'=>$articleid,'volumeid'=>$item['id'],'mode'=>'text','model'=>1))}" target="_blank"><i class="fa fa-text-width"></i> 文字模式</a></li>
									<li><a href="{:url('articles/editor',array('model_id'=>1,'cartoonid'=>$articleid,'volumeid'=>$item['id'],'mode'=>'img','model'=>1))}" target="_blank"><i class="fa fa-picture"></i>图片模式</a></li>
								</ul>
							</div>
							<!---href="{:url('spread/add',array('model_id'=>7,'volumeid'=>$item['id'],'modelid'=>1))}" --->
							<a title="原文链接为当前章节" href="JavaScript:;"  onclick="createReferralModal({$item['id']})">
                               <i class="fa fa-link"></i> 获取推广链接
                            </a>
                            {/if}
							{if condition="in_array($group,$access)"}
							<a href="{:url('admin/chapter/edit?model_id=2',array('id'=>$item['id'],'articleid'=>$articleid))}">编辑</a>			
							<a href="{:url('admin/chapter/del?model_id=2',array('id'=>$item['id'],'articleid'=>$articleid))}" class="ajax-get confirm">删除</a>
							{/if}
						</span>
				</li>
			{/volist}														</ul>
			{if condition="in_array($group,$access)"}
				{$chapterlist->render()}
			{/if}
		</div>
	</div>
</div>
<div id="create-referral-link-modal" class="modal fade in" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <span style="font-size: 20px;"><span>生成推广链接</span></span>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" >
				<input type="hidden" name="modelid" id="modelid" value="1">
				<input type="hidden" name="articleid" id="articleid" value="{$info.id}">
				<input type="hidden" name="chapterid" id="chapterid">
                    <div class="form-group">
                        <label class="control-label col-sm-3">入口页面</label>
                        <div class="col-sm-7">
							<select name="types" id="types" class="form-control" style="width:auto;" disabled>
                                <option value="1">首页</option>
                                <option value="0" selected>小说阅读页</option>
                                <option value="2">热门推荐</option>
                                <option value="4">热门推荐-男生</option>
                                <option value="5">热门推荐-女生</option>
                                <option value="7">常用链接</option>
                                <option value="8">平台活动</option>
                                <option value="9">自定义活动</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3">小说</label>
                        <div class="col-sm-7" >
                            <div style="margin-top: 8px;" data-bind="text: novel_title">{$info.title}</div>
                        </div>
                    </div>
					<div class="form-group">
						<label class="control-label col-sm-3">章节</label>
						<div class="col-sm-7">
							<div style="margin-top: 8px;" id="chapter_title"></div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-3">备注</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" name="title" id="title" autocomplete="false" value="" placeholder="请填写派单渠道名称">
						</div>
					</div>
                    
                    <div class="form-group">
                        <label class="control-label col-sm-3"><span class="required">*</span> 推广类型</label>
                        <div class="col-sm-7">
                            <label class="radio-inline">
                                <input type="radio" name="urltype" value="2"/>
                                <span>内推</span>
                            </label>
                            <label class="radio-inline" data-bind="visible: allow_outer_publish">
                                <input type="radio" name="urltype" value="1"/>
                                <span>外推</span>
                            </label>
                            <p class="help-block help-block-error"></p>

                            <div id="urltype2" style="display:none;margin-bottom:0;" class="alert alert-warning">
                              <i class="fa fa-info-circle"></i> 内推链接<span style="color:red">无法引导关注公众号</span>，仅限公众号内部推文使用，如需推广引粉请选择"外推"
                            </div>

                            <div id="urltype1" style="display:none;margin-bottom:0;" class="alert alert-warning">
                              <i class="fa fa-info-circle"></i>
                              <div style="display: inline">
                                1. 需要统计回本率的外推链接，请前往【<span style="color: red">编辑成本</span>】弹窗里设置<span style="color: red">成本</span>和<span style="color: red">实际推广时间</span>。 <br />
                                2. 回本率的计算，<span style="color: red">只按照实际推广时间开始统计</span>。<br />
                                3. 渠道未能及时设置实际推广时间，历史数据不做回补。
                              </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="form-group">
						<label class="control-label col-sm-3">关注章节序号</label>
						<div class="col-sm-7">
							<input type="text" style="width: auto;" class="form-control" name="followchapter" id="followchapter" autocomplete="false" value="">
							<p class="help-block help-block-error" ></p>
						</div>
					</div>
                    <div class="form-group" >
                        <label class="control-label col-sm-3"><span class="required" aria-required="true">*</span>推广源</label>
                        <label class="radio-inline">
                            <input type="radio" name="source_id" value="1" checked/>
                            <span>公众号</span>
                        </label>
                        <label class="radio-inline" data-bind="visible: allow_outer_publish">
                            <input type="radio" name="source_id" value="2"/>
                            <span>投放</span>
                        </label>
                    </div>
                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="createreferral" class="btn btn-primary">生成链接</button>
            </div>
        </div>
    </div>
</div>
<div id="view-chapter-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width:1000px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" data-bind="text: title"></h4>
                </div>
                <div class="modal-body" >
                    <div class="chapter-content" style="overflow: auto;" ></div>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default prevArticle" onclick="prevArticle($(this).data('id'),$(this).data('name'))">上一章</button>
                    <button type="button" class="btn btn-primary nextArticle" onclick="nextArticle($(this).data('id'),$(this).data('name'))">下一章</button>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.custom.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/droppable.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/board/board.min.js"></script>
<script>
	(function(window, $) {
		$.fn.serializeJson = function() {
			var serializeObj = {};
			var array = this.serializeArray();
			var str = this.serialize();
			$(array).each(
					function() {
						if (serializeObj[this.name]) {
							if ($.isArray(serializeObj[this.name])) {
								serializeObj[this.name].push(this.value);
							} else {
								serializeObj[this.name] = [
										serializeObj[this.name], this.value ];
							}
						} else {
							serializeObj[this.name] = this.value;
						}
					});
			return serializeObj;
		};
	})(window, jQuery);
    $(function () {
        var novelId = 29 ;
        var verifiedStatus = 1;

        $('[data-toggle="tooltip"], [data-toggle="create-referral-link"]').tooltip();

        $('#view-chapter-modal .chapter-content').css('height', Math.floor($(window).height() * 0.75) + 'px');

        $(document).on('click', '[data-toggle="view-chapter"]', function () {
            var id = $(this).data('id'),
				chaptername = $(this).data('chaptername');
            viewChapter(id,chaptername);
            return false;
        });

        $(document).on('click', '[data-toggle="set-force-follow-chapter"]', function () {
            var id = $(this).data('article-id');
			var volumeorder = $(this).data('volumeorder');
            var isPaidArticle = $(this).data('is-paid-article');

            var promise = null;
			
            if (isPaidArticle) {
				updateAlert('<span style="color:red">设置收费章节为关注章节可能导致低关注率</span>');
				setTimeout(function() {
					promise = $.Deferred().resolve();
					 promise.then(function () {
						var url = "{:url('admin/novel/setfocuschapter')}"
						$.ajax({
							url: url+'?model_id=1&bookid='+id+'&volumeorder='+volumeorder,
							type: 'POST',
							contentType: 'application/json'
						})
						
						.then(function () {
							updateAlert('设置成功', 'success');
							reloadPage(500);
						})
						.fail(function () {
							updateAlert('设置失败', 'error');
						});
						
					});
					return false;
				}, 1500);
            } else {
                promise = $.Deferred().resolve();
            }
			
			

            promise.then(function () {
				var url = "{:url('admin/novel/setfocuschapter')}"
                $.ajax({
                    url: url+'?model_id=1&bookid='+id+'&volumeorder='+volumeorder,
                    type: 'POST',
                    contentType: 'application/json'
                })
				
				.then(function () {
					updateAlert('设置成功', 'success');
					reloadPage(500);
				})
				.fail(function () {
					updateAlert('设置失败', 'error');
				});
				
            });

            return false;
        });

		$('input[name="urltype"]').on('click',function(){
			if($(this).val()==1){
				$("#urltype1").show();
				$("#urltype2").hide();
			}else{
				$("#urltype2").show();
				$("#urltype1").hide();
			}
		})

		$("#createreferral").on('click',function(){
			var data = $('form').serializeJson();
			if (data['title'].length==0)
			{
				updateAlert("备注不能为空", 'danger');
				return false;
			}

			if (data['urltype'].length==0)
			{
				updateAlert("推广类型不能为空", 'danger');
				return false;
			}
			$.ajax({
				type: "POST",
				url: "{:url('admin/spread/add?model_id=7')}",
				data:data,
				dataType: "json",
				success: function(data){
					if(data.code==1){
						updateAlert(data.msg, 'success');
						setTimeout(function() {	
							//window.location.reload();
							location.href = data.url;
						}, 1500);
					}else{
						updateAlert("生成失败，"+data.msg, 'danger');
					}
				},
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			})
		})
		
    })
	
	function viewChapter(id,chaptername) {
		var $current = $('.list-group-item [data-toggle="view-chapter"][data-id="' + id + '"]');
		
		var prevId = $current.closest('li').prev().find('[data-toggle="view-chapter"]').data('id');
		var prevName = $current.closest('li').prev().find('[data-toggle="view-chapter"]').data('chaptername');

		var nextId = $current.closest('li').next().find('[data-toggle="view-chapter"]').data('id');

		var nextName = $current.closest('li').next().find('[data-toggle="view-chapter"]').data('chaptername');

		$.get('{:url('chapter/api_get_chapter')}', { id: id,chaptername:chaptername,model_id:2}, function (data) {
			
			$('#view-chapter-modal .modal-title').html(data.title);
			$('#view-chapter-modal .chapter-content').html(data.content.replace(/[ ]/g,""));

			var $prevButton = $('#view-chapter-modal .prevArticle');
			var $nextButton = $('#view-chapter-modal .nextArticle');

			if (prevId) {
				$prevButton.data('name', prevName);
				$prevButton.data('id', prevId).show();
			} else {
				$prevButton.hide();
			}
			console.log(nextId);
			if (nextId) {
				$nextButton.data('name', nextName)
				$nextButton.data('id', nextId).show();
			} else {
				$nextButton.hide();
			}
			var $modal = $('#view-chapter-modal');
			//$modal.off('shown.bs.modal').on('shown.bs.modal', createBLazy);
			if ($modal.data('bs.modal') && $modal.data('bs.modal').isShown) {
				$modal.find('.chapter-content').scrollTop(0);
			} else {
				$modal.modal('show');
			}
		},'json');
	}

	function nextArticle(nextArticleId,chaptername) {
        viewChapter(nextArticleId,chaptername);
    }

	function prevArticle(prevArticleId,chaptername) {
        viewChapter(prevArticleId,chaptername);
    }

	function createReferralModal(chapterid){
		var $modal = $('#create-referral-link-modal');
		$modal.on('shown.bs.modal', function () {
			$("#chapterid").val(chapterid);
			var chaptername = $("#chapter"+chapterid+" a").eq(0).html();
			$("#chapter_title").html(chaptername);
		});	
		$modal.modal('show');
	}
</script>

{/block}